<template>
  <div class="carll" @click="add">
    <div class="carll-item">
      <img :src="item.cozImg" class="insd" />
      <div class="insd-text">
        <div class="bitis">{{ item.cozName }}</div>
        <p>在线课程</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import { getCommon } from '@/utils/Commonmethod'
const router = useRouter()
const props = defineProps<{
  item: any
}>()
const add = () => {
  getCommon({
    monitorType: 'course',
    monitorId: props.item.cozId,
    monitorStatus: '1'
  })
  if (props.item.isFrame == '1') {
    window.location.href = props.item.cozUrl
  } else {
    router.push({
      path: '/VideoDisplay',
      query: {
        id: props.item.cozId
      }
    })
  }
}
</script>

<style lang="scss" scoped>
.carll {
  flex: 1;
  height: 153px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.carll-item {
  width: 170px;
  height: 153px;
}
.insd {
  width: 170px;
  height: 88px;
}
.insd-text {
  width: 170px;
  height: 60px;
  padding: 10px;
  box-sizing: border-box;
}
.bitis {
  width: 170px;
  white-space: nowrap; /* 防止文本换行 */
  overflow: hidden; /* 溢出隐藏 */
  text-overflow: ellipsis; /* 使用省略号显示截断的文本 */
}
</style>
